<template>
	<view>
		<!-- <view class="panl">
			<u-search placeholder="请输入要查询的信息" v-model="keyword" :clearabled="true" shape="round" @custom="onSearch()"></u-search>
		</view> -->
		
		<view class="panl">
			<u-swiper :list="banner_list" :title="true"></u-swiper>
		</view>
		
		<view class="grid">
			<u-grid :col="4">
				<!-- nav()页面跳转函数，自己定义的 -->
					<u-grid-item @click="nav('/pages/yuyue/yuyue')">
						<u-icon name="/static/icon/yuyue.png" :size="46"></u-icon>
						<view class="grid-text">预约</view>
					</u-grid-item>
					<u-grid-item @click="nav('/pages/house/dkjs')">
						<u-icon name="/static/icon/count.png" :size="46"></u-icon>
						<view class="grid-text">房贷计算器</view>
					</u-grid-item>
					<u-grid-item @click="item()">
						<u-icon name="/static/icon/news.png" :size="46"></u-icon>
						<view class="grid-text">项目</view>
					</u-grid-item>
					<u-grid-item  @click="call_phone()">
						<u-icon name="/static/icon/custom.png" :size="46"></u-icon>
						<view class="grid-text">客服</view>
					</u-grid-item>
				</u-grid>
		</view>
		<view class="panl">
			<text class="title">最新发布</text>
		</view>
		<view class="collection">
		<view style="display: flex;flex-direction: column;">
					
	
				
				
					<view class="task" style="position: static;">
						<view class="cu-chat">
				
							<view class="cu-item animation-bottom-top" v-for="(item,index) in infoList" :key="index" @click="hrefTaskDetail(item)">
		
								<view class="main">
									<!-- <view class="thumb"> -->
										<!-- <image :src="item.url" style="width: 120rpx;height: 120rpx;" mode="aspectFit"  ></image> -->
										<fr-image class="img" :lazy-load="true" style="width: 120rpx;height: 120rpx;"
											:src="get_img+item.img" mode="" />
							
									<view class="content shadow">
		
										<view class="item-header">
		
											<view class="item-title text-lg text-bold">{{item.name}}</view>
											
											<view class="item-price"><text
													class="text-price text-red text-lg text-bold padding-sm">{{item.price}}</text>
											</view>
										</view>
										<view class="item-desc text-gray text-sm">
											{{item.name}}
		
										</view>
										
										<view class="university">
											<text class="text-grey text-sm">{{item.price}}</text>
										</view>
									</view>
								</view>
		
		
								<view class="date">
									<text class="text-xs text-gray">发布时间:{{item.created_at}}</text>
									<button class="cu-btn round shadow bg-yellow sm"
										@click.stop="contactClick(item)">查看</button>
		
								</view>
							</view>
						</view>
					</view>
		
				</view>
				</view>
	</view>
</template>

<script>
	import commonModel from '../../model/common.js'
	import HMfilterDropdown from '@/components/HM-filterDropdown/HM-filterDropdown.vue';
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import Goods from "@/components/goods.vue"
	import taskItem from "@/components/taskItem.vue"
	
	
	import FrImage from '@/components/fr-image/fr-image.vue'
	export default {
		data() {
			return {
				keyword:'',
				get_img:this.$get_img,
				banner_list: [{
										image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
										title: '昨夜星辰昨夜风，画楼西畔桂堂东'
									},
									{
										image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
										title: '身无彩凤双飞翼，心有灵犀一点通'
									},
									{
										image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
										title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
									}
								],
				infoList:[]
			}
		},
		components: {
			'HMfilterDropdown': HMfilterDropdown,
			Goods,
			taskItem,
			FrImage
		
		},
		onLoad(option) {
			if(option){
				console.log(option)		
				if(option.uid){
					uni.setStorageSync('invite_id',option.uid)//存缓存
				}
			}
			this.get_banner()
			this.get_house()
		},
		methods: {
			onSearch(){
				console.log(this.keyword)
			},
			//获取广告
			get_banner()
			{
				commonModel.get_banner().then(res=>{
					this.banner_list=res.data
					console.log(this.banner_list)
				})
				
			},
			nav(url){
				//页面跳转
				uni.navigateTo({
					url:url
				})
			},
			hrefTaskDetail(item){
				uni.navigateTo({
					url:'/pages/project/detail?id='+item.id
				})
			},
			//拨打客服电话
			call_phone()
			{
				let sys=uni.getStorageSync('sys');
				console.log(sys)
				uni.makePhoneCall({
				    phoneNumber: sys.mobile 
				});
			},
			item(){
				uni.switchTab({
					url:'../project/project'
				})
			},
			//获取最新房屋
			get_house(){
				commonModel.get_house().then(res=>{
					this.infoList=res.data
				})
			}
		}
	}
</script>

<style  lang="scss" scoped>
	.panl{
		padding: 20rpx;
	}
	
	.title{
		font-size: 40upx;
		font-weight: 700;
		color: #FFFFFF;
		background-image: linear-gradient(#31d5d6, #47adff);
	}
	
	.cu-chat .cu-item>.main .content {
		display: block;
		width: 100%;

		padding: 0;
	}

	.cu-chat .cu-item>.main .content::before {
		display: none;

	}

	.cu-chat .cu-item>.main .content::after {
		display: none;

	}

	.cu-chat .cu-item .date {
		height: 40px;
		left: 0;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0 15rpx;

		button {
			margin-left: auto;
			margin-right: 10rpx;
		}
	}

	.cu-chat .cu-item>.main {
		max-width: 100% !important;
		min-width: 100% !important;
	}

	.cu-chat .cu-item>.cu-avatar {
		width: 35px !important;
		height: 35px !important;
		border-radius: 50%;
	}

	.task {
		width: 100vw;
		display: flex;
		flex-flow: column;

		.cu-chat {
			.cu-item {
				margin: 10rpx 10rpx 0 10rpx;
				padding: 30rpx 15rpx 70rpx 15rpx;
				border-radius: 3px;
				background-color: #FFFFFF;

				.main {
					margin: 0;

					.content {
						background-color: #FFFFFF;

						.university {
							width: 100%;
							text-align: right;
							padding: 0 15rpx;
						}

						.item-header {
							width: 100%;
							display: flex;
							justify-content: flex-start;
							align-items: center;

							.item-price {
								margin-left: auto;
							}

							.item-title {
								// padding: 7px;
								display: -webkit-box;
								/*设置为弹性盒子*/
								-webkit-line-clamp: 1;
								/*最多显示1行*/
								overflow: hidden;
								/*超出隐藏*/
								text-overflow: ellipsis;
								/*超出显示为省略号*/
								-webkit-box-orient: vertical;
								word-break: break-all;
								/*强制英文单词自动换行*/
								max-width: 350rpx;
							}
						}

						.item-desc {
							// padding: 7px;
							display: -webkit-box;
							/*设置为弹性盒子*/
							-webkit-line-clamp: 3;
							/*最多显示1行*/
							overflow: hidden;
							/*超出隐藏*/
							text-overflow: ellipsis;
							/*超出显示为省略号*/
							-webkit-box-orient: vertical;
							word-break: break-all;
							/*强制英文单词自动换行*/
							max-width: 600rpx;
						}
					}
				}
			}

		}

	}
</style>
